<template>
  <div class="contact">
    <section class="banner">
      <img src="@/assets/banner/home_pic_yj.png">
    </section>
    <section class="contact-us">
      <div class="title">
        <div class="title-cn">联系我们</div>
        <div class="title-en">Contact us</div>
        <div class="title-line"></div>
      </div>
      <div class="amap-page-container">
        <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo">
          <el-amap-marker vid="component-marker"></el-amap-marker>
          <el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :vid="index"></el-amap-marker>
        </el-amap>
      </div>
    </section>

    <Row class="company-detail">
      <Col :span="20">
        <div class="top-line"></div>
        <div class="company-title">
          <div class="company-title-cn">
            上海欧点信息科技有限公司
          </div>
          <div class="company-title-en">
            Shanghai Oudot Information Technology Co.,Ltd
          </div>
        </div>

        <div class="company-desc">
          <p class="company-desc-item">
            地址：上海市静安区彭江路602号E座415室 400-100-2187 
          </p>
          <p class="company-desc-item">
            电话：400-100-2187 
          </p>
          <p class="company-desc-item">
            手机：15021535960 / 135641382773
          </p>
          <p class="company-desc-item">
            邮箱：stella@oudot.cn
          </p>
        </div>
      </Col>
      <Col :span="4">
        <div class="top-line"></div>
        <div class="company-title">
          <div class="company-title-cn">
            关注我们
          </div>
        </div>
        <div class="company-img">
          <img src="@/assets/home_pic_ewm.png">
        </div>
      </Col>
    </Row>

    <Footer class="footer">Copyright@2016 Oragee Corp.All Rights Reserved.沪ICP备 08006976-5号 上海欧建通信科技有限公司</Footer>
  </div>
</template>

<script>
const exampleComponents = {
  props: ['text'],
  template: `<div>text from  parent: {{text}}</div>`
}
export default {
  data () {
    return {
      count: 1,
      slotStyle: {
        padding: '2px 8px',
        background: '#eee',
        color: '#333',
        border: '1px <s></s>olid #aaa'
      },
      zoom: 20,
      center: [121.44714, 31.28708],
      markers: [
        {
          position: [121.44714, 31.28708]
        }
      ]
    }
  },
  mounted() {
    // location: lng = 121.44714 lat = 31.28708
  },
  methods: {
  }
}
</script>

<style scoped>
.contact {
  background-color: #fff;
}
.banner {
  width: 100%;
  max-height: 360px;
  overflow: hidden;
}
.banner img {
  width: 100%;
}
.title {
  width: 100%;
  margin: 100px 0 0 0;
  text-align: center;
}
.title .title-cn {
  font-size: 30px;
  color: rgba(51,51,51,1);
  line-height: 42px;
}
.title .title-en {
  font-size: 14px;
  color: rgba(103,103,103,1);
  line-height: 20px;
  margin-top: 12px;
}
.title .title-line {
  margin: 24px auto;
  width: 1px;
  height: 32px;
  background: rgba(230,230,230,1);
}
.amap-demo {
  width: 1200px;
  height: 400px;
  margin: 0 auto;
}
.company-detail {
  width: 1200px;
  margin: 100px auto;
}
.top-line {
  width: 160px;
  height: 1px;
  background: rgba(230,230,230,1);
}
.company-title {
  margin-top: 28px;
}
.company-title-cn {
  font-size: 20px;
  color: rgba(51,51,51,1);
  line-height: 28px;
}
.company-title-en {
  font-size: 14px;
  color: rgba(153,153,153,1);
  line-height: 20px;
  margin-top: 4px;
}
.company-desc {
  margin-top: 47px;
}
.company-desc-item {
  font-size: 14px;
  color: rgba(102,102,102,1);
  line-height: 20px;
  margin-bottom: 20px;
}
.company-desc-item:last-of-type {
  margin-bottom: 0;
}
.company-img {
  width: 200px;
  height: 200px;
  margin-top: 33px;
}
.company-img img {
  width: 200px;
  height: 200px;
}
.footer {
  width: 1200px;
  height: 64px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  font-size: 14px;
  color: #666;
  line-height: 64px;
  border-top: 1px solid #F2F2F2;
}
</style>
